<template>
  <div class="meizhuang">
    <Navbar title="美妆榜" />
    <div>
      <div class="goods">
        <!-- 美妆-列表 -->
        <div>
          <ul class="goods-list">
            <li>上升榜</li>
            <li>卸妆</li>
            <li>妆前</li>
            <li>粉底</li>
            <li>上升榜</li>
            <li>妆前</li>
            <li>粉底</li>
            <li>上升榜</li>
          </ul>
        </div>
        <!-- 美妆-产品 -->
        <div class="goods-detail">
          <!-- 明细 -->
          <div class="detail">
            <div class="detail-left">
              <img
                src="http://10.31.169.37:3000/images/王/meizhuang-list/lipstick.png"
                alt=""
              />
            </div>
            <div class="detail-right">
              <h3>魅可润采诱光唇膏16</h3>
              <i>MAC CREMESHEEN LIPSTICK-DATE YOU</i>
              <div class="grades-stars">
                <em>8.0</em>
                <img
                  src="http://10.31.169.37:3000/images/王/meizhuang-list/grade-stars.png"
                  alt=""
                />
                <span>（117869评分）</span>
              </div>
              <i>美国·￥170/3g</i>
            </div>
            <div class="hot-tag">
              <span>近期热评</span>
            </div>
          </div>
          <div class="detail">
            <div class="detail-left">
              <img
                src="http://10.31.169.37:3000/images/王/meizhuang-list/lipstick.png"
                alt=""
              />
            </div>
            <div class="detail-right">
              <h3>魅可润采诱光唇膏16</h3>
              <i>MAC CREMESHEEN LIPSTICK-DATE YOU</i>
              <div class="grades-stars">
                <em>8.0</em>
                <img
                  src="http://10.31.169.37:3000/images/王/meizhuang-list/grade-stars.png"
                  alt=""
                />
                <span>（117869评分）</span>
              </div>
              <i>美国·￥170/3g</i>
            </div>
            <div class="hot-tag">
              <span>近期热评</span>
            </div>
          </div>
          <div class="detail">
            <div class="detail-left">
              <img
                src="http://10.31.169.37:3000/images/王/meizhuang-list/lipstick.png"
                alt=""
              />
            </div>
            <div class="detail-right">
              <h3>魅可润采诱光唇膏16</h3>
              <i>MAC CREMESHEEN LIPSTICK-DATE YOU</i>
              <div class="grades-stars">
                <em>8.0</em>
                <img
                  src="http://10.31.169.37:3000/images/王/meizhuang-list/grade-stars.png"
                  alt=""
                />
                <span>（117869评分）</span>
              </div>
              <i>美国·￥170/3g</i>
            </div>
            <div class="hot-tag">
              <span>近期热评</span>
            </div>
          </div>
          <div class="detail">
            <div class="detail-left">
              <img
                src="http://10.31.169.37:3000/images/王/meizhuang-list/lipstick.png"
                alt=""
              />
            </div>
            <div class="detail-right">
              <h3>魅可润采诱光唇膏16</h3>
              <i>MAC CREMESHEEN LIPSTICK-DATE YOU</i>
              <div class="grades-stars">
                <em>8.0</em>
                <img
                  src="http://10.31.169.37:3000/images/王/meizhuang-list/grade-stars.png"
                  alt=""
                />
                <span>（117869评分）</span>
              </div>
              <i>美国·￥170/3g</i>
            </div>
          </div>
          <div class="detail">
            <div class="detail-left">
              <img
                src="http://10.31.169.37:3000/images/王/meizhuang-list/lipstick.png"
                alt=""
              />
            </div>
            <div class="detail-right">
              <h3>魅可润采诱光唇膏16</h3>
              <i>MAC CREMESHEEN LIPSTICK-DATE YOU</i>
              <div class="grades-stars">
                <em>8.0</em>
                <img
                  src="http://10.31.169.37:3000/images/王/meizhuang-list/grade-stars.png"
                  alt=""
                />
                <span>（117869评分）</span>
              </div>
              <i>美国·￥170/3g</i>
            </div>
          </div>
        </div>
      </div>
      <div class="icon-img">
        <img
          src="http://10.31.169.37:3000/images/王/meizhuang-list/more-icon.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from "../../Navbar.vue";
export default {
  data() {
    return {};
  },
  components: { Navbar },
};
</script>

<style lang="less" scoped>
.goods {
  background: #fff;
  position: relative;
  width: 100%;
  margin-top: 46px;
  // 美妆-列表
  .goods-list {
    display: flex;
    overflow: scroll;
    white-space: nowrap;
    border-bottom: 1px #ccc solid;
    li {
      display: inline-block;
      color: #999;
      margin: 15px 17px;
      font-size: 16px;
    }
  }
  .goods-list::-webkit-scrollbar {
    display: none;
  }
  // 美妆-商品
  .goods-detail {
    width: 100%;
    background: #fff;
    .detail {
      margin: 0 5px;
      display: flex;
      position: relative;
      padding: 10px 0 15px 0;
      border-bottom: 1px solid #ddd;
      .detail-left {
        width: 80px;
        height: 80px;
        img {
          width: 80px;
          height: 80px;
        }
      }
      .detail-right {
        // margin-left: 5px;
        h3 {
          font-size: 15px;
          // margin-bottom: 3px;
        }
        i {
          display: inline-block;
          color: #aaa;
          // margin-bottom: 3px;
          font-size: 12px;
        }
        .grades-stars {
          // margin-bottom: 12px;
          em {
            font-size: 13px;
            color: rgb(23, 209, 209);
          }
          img {
            height: 11px;
            margin-left: 3px;
          }
          span {
            font-size: 13px;
            margin-left: 3px;
          }
        }
      }
      .hot-tag {
        position: absolute;
        top: 5px;
        right: 2px;
        background-color: rgb(248, 139, 99);
        border-radius: 13px;
        span {
          display: block;
          color: #fff;
          margin: 2px 5px;
          font-size: 10px;
        }
      }
    }
  }
}
// 美妆-列表-固定图片
.icon-img {
  height: 43px;
  width: 43px;
  background: #fff;
  position: absolute;
  right: 0;
  top: 46px;
  z-index: 500px;
  img {
    width: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 500px;
  }
}
</style>
